<template>
	<view class="my">
		<uni-nav-bar dark :fixed="true" :border="false" background-color="#FFFFFF" status-bar title="我的" color="#000" />
		<view class="my-info" @click="toPage('/pages/my/changeInfo/changeInfo')">
			<view style="width: 150rpx;border-radius: 50%;overflow: hidden;">
				<image :src="READ_IMG_URL+userInfo.image" mode="widthFix center" class="circle-image">
				</image>
			</view>
			<view class="my-info-text" >
				<view style="font-size: 40rpx;font-weight: 800;margin-top: 20rpx;">
					<text>{{userInfo.nickName}}</text>
				</view>
				<view style="font-size: 25rpx;">
					<text>{{userInfo.roleName}}</text>
				</view>
			</view>
		</view>
		<view style="margin-top: 10rpx;">
			<u-cell-group>
				<u-cell isLink title="消息通知" url="/pages/my/message/message">
					<text slot="value" class="u-slot-value" v-show="total > 0">
						{{totalText}}
					</text>
				</u-cell>
				<u-cell isLink title="退出登录" @click="logout"></u-cell>
				<!-- <u-cell title="设置" isLink url="/pages/componentsB/tag/tag"></u-cell> -->
			</u-cell-group>
		</view>
<!-- 		<u-modal :show="show" title="提示" :content='content' @confirm="logout"
			:closeOnClickOverlay="true" @close="close">
		</u-modal> -->
	</view>
</template>

<script>
	import api from "../../request/api.js";
	import config from "../../request/config.js";
	export default {
		data() {
			return {
				userInfo: {},
				READ_IMG_URL: config.READ_IMG_URL,
				show: false,
				content: '是否要退出登录？',
				totalText: '0',
				total: 0,
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("loginUser")
		},
		onShow() {
			this.getMsgList();
		},
		methods: {
			// 页面跳转
			toPage(url){
				uni.navigateTo({
					url:url
				})
			},
			// 退出登录
			logout(){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.doLogout();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 做退出登录
			doLogout(){
				uni.showLoading({
					title: "退出中...",
					mask: true
				})
				api.logout().then(res =>{
					if (res.code === 200){
						uni.hideLoading();
						uni.reLaunch({
							url: "/pages/login/login?type=1"
						});
					}
				})
			},
			// 关闭弹窗
			close(){
				this.show = false
			},
			// 查消息条数
			getMsgList(){
				const data = {
					currentPage: 1,
					pageSize: 10,
					msgStatus: 0,
				}
				api.getMsgNotificationList(data).then(res =>{
					if (res.code === 200){
						this.total=res.data.total
						if (res.data.total > 0){
							this.totalText=this.total.toString()
							uni.setTabBarBadge({
								index: 2,
								text: this.totalText
							})
						}else {
							uni.removeTabBarBadge({
								index: 2
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	.my-info{
		height: 150rpx;
		padding: 10rpx 20rpx;
		/* background-color: pink; */
		display: flex;
	}
	
	.circle-image {
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
	}
	
	.my-info-text{
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		line-height: 45rpx;
	}
	
	.u-slot-value{
	    color: #ffffff;
	    background-color: #f56c6c;
	    border-radius: 50%;
	    width: 50rpx;
	    text-align: center;
	}
</style>